<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>系统小助手 - 正在启动</title>
    <style>
        /**
         * CSS样式表 - 启动屏幕
         * 
         * 本样式表定义了启动屏幕的所有视觉元素和动画效果
         * 设计原则：简洁现代、渐进式动画、与主应用保持一致的设计语言
         */

        /* 定义系统全局主题色变量，与主应用保持一致 */
        :root {
            --primary-100: #8FBF9F;
            /* 主色调-浅色 */
            --primary-200: #68a67d;
            /* 主色调-中色 */
            --primary-300: #24613b;
            /* 主色调-深色 */
            --accent-100: #F18F01;
            /* 强调色-浅色 */
            --accent-200: #833500;
            /* 强调色-深色 */
            --text-100: #353535;
            /* 文本-主要色 */
            --text-200: #5f5f5f;
            /* 文本-次要色 */
            --bg-100: #F5ECD7;
            /* 背景-浅色 */
            --bg-200: #E6DCC6;
            /* 背景-中色 */
            --bg-300: #D4C8B0;
            /* 背景-深色 */
        }

        /* 启动屏幕的基本样式，垂直居中布局 */
        body {
            /* 字体设置：优先使用系统字体，确保在不同平台上的一致性 */
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--bg-100);
            /* 使用主题变量的背景色 */
            display: flex;
            /* 使用弹性盒布局 */
            height: 100vh;
            /* 占满整个视窗高度 */
            color: var(--text-100);
            /* 文本颜色 */
            overflow: hidden;
            /* 隐藏可能的滚动条 */
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
            flex-direction: column;
            /* 垂直排列子元素 */
        }

        /* 内容容器样式，包含logo、文本和加载进度条 */
        .splash-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
        }

        /* 应用logo样式，使用脉冲动画效果增强视觉体验 */
        .logo {
            width: 120px;
            height: 120px;
            margin-bottom: 20px;
            border-radius: 24px;
            /* 圆角边框 */
            background-color: var(--primary-200);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
            /* 阴影效果增强立体感 */
            animation: pulse 1.5s infinite ease-in-out;
            /* 无限循环的脉冲动画 */
        }

        /* 应用图标样式 */
        .logo-icon {
            font-size: 60px;
            color: white;
            /* 图标为白色，与背景形成对比 */
        }

        /* 应用名称文本样式，应用渐入动画效果 */
        .logo-text {
            font-size: 24px;
            font-weight: bold;
            color: var(--primary-300);
            /* 使用深色主题色 */
            margin-bottom: 20px;
            opacity: 0;
            /* 初始不可见 */
            animation: fadeIn 0.8s forwards 0.5s;
            /* 延迟0.5秒后开始渐入，持续0.8秒 */
        }

        /* 加载进度条容器样式 */
        .loader {
            width: 240px;
            height: 6px;
            background-color: var(--bg-300);
            /* 使用深色背景色 */
            border-radius: 3px;
            /* 圆角边框 */
            overflow: hidden;
            /* 隐藏超出部分 */
            position: relative;
            /* 相对定位，用于内部进度条定位 */
            margin-bottom: 10px;
        }

        /* 加载进度条动画元素 */
        .loader-bar {
            position: absolute;
            /* 绝对定位在loader内 */
            left: 0;
            /* 从左侧开始 */
            height: 100%;
            /* 占满高度 */
            width: 0%;
            /* 初始宽度为0，通过JS控制增长 */
            background-color: var(--accent-100);
            /* 使用强调色 */
            border-radius: 3px;
            /* 圆角与容器一致 */
            transition: width 0.3s ease-in-out;
            /* 平滑过渡动画 */
        }

        /* 进度百分比显示 */
        .progress-text {
            font-size: 12px;
            color: var(--text-200);
            /* 使用次要文本色 */
            margin-bottom: 10px;
            opacity: 0;
            /* 初始不可见 */
            animation: fadeIn 0.8s forwards 0.7s;
            /* 延迟0.7秒后渐入 */
        }

        /* 状态文本样式，应用渐入动画 */
        .status-text {
            font-size: 14px;
            color: var(--text-200);
            /* 使用次要文本色 */
            opacity: 0;
            /* 初始不可见 */
            animation: fadeIn 0.8s forwards 0.8s;
            /* 延迟0.8秒后渐入 */
        }

        /* 版本信息样式，显示在页面底部 */
        .version-text {
            position: absolute;
            /* 绝对定位 */
            bottom: 10px;
            /* 距底部20px */
            font-size: 12px;
            color: var(--text-200);
            /* 使用次要文本色 */
            opacity: 0.7;
            /* 半透明效果 */
        }

        /**
         * 动画关键帧定义
         * 
         * 以下定义了启动屏幕中使用的各种动画效果
         */

        /* 定义logo脉冲动画 - 循环放大缩小效果 */
        @keyframes pulse {
            0% {
                transform: scale(1);
                /* 原始大小 */
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
            }

            50% {
                transform: scale(1.05);
                /* 放大5% */
                box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
                /* 阴影增强 */
            }

            100% {
                transform: scale(1);
                /* 恢复原始大小 */
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
            }
        }

        /* 定义渐入动画，用于文本元素 - 从底部向上渐入 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                /* 完全透明 */
                transform: translateY(10px);
                /* 从下方10px位置开始 */
            }

            to {
                opacity: 1;
                /* 完全不透明 */
                transform: translateY(0);
                /* 移动到原位置 */
            }
        }

        /* 定义滑入动画 - 从左到右滑入 */
        @keyframes slideIn {
            from {
                transform: translateX(-100%);
                /* 从左侧外部开始 */
            }

            to {
                transform: translateX(0);
                /* 移动到原位置 */
            }
        }

        /* 定义淡出动画类，用于主窗口准备好时的过渡效果 */
        .fade-out {
            animation: fadeOut 0.8s forwards;
            /* 0.8秒内淡出并保持状态 */
        }

        /* 淡出动画定义 - 从可见到不可见 */
        @keyframes fadeOut {
            from {
                opacity: 1;
                /* 完全不透明 */
            }

            to {
                opacity: 0;
                /* 完全透明 */
            }
        }

        /* 加载状态动画样式 - 步骤指示器 */
        .loading-steps {
            display: flex;
            /* 水平排列步骤点 */
            margin-top: 5px;
            opacity: 0;
            /* 初始不可见 */
            animation: fadeIn 0.8s forwards 1s;
            /* 延迟1秒后渐入 */
        }

        /* 单个步骤点样式 */
        .step {
            width: 8px;
            height: 8px;
            margin: 0 4px;
            /* 左右间距4px */
            background-color: var(--bg-300);
            /* 使用深色背景 */
            border-radius: 50%;
            /* 圆形 */
        }

        /* 激活状态的步骤点样式 */
        .step.active {
            background-color: var(--accent-100);
            /* 使用强调色 */
            animation: pulse 1.5s infinite;
            /* 应用脉冲动画 */
        }
    </style>
</head>

<body>
    <!-- 主内容容器，包含所有启动画面元素 -->
    <div id="splash-content" class="splash-container">
        <!-- 应用logo容器 -->
        <div class="logo">
            <div class="logo-icon">⚙️</div> <!-- 使用齿轮Emoji作为临时图标 -->
        </div>
        <!-- 应用名称 -->
        <div class="logo-text">系统小助手</div>
        <!-- 加载进度条 -->
        <div class="loader">
            <div id="progress-bar" class="loader-bar"></div>
        </div>
        <!-- 进度百分比显示 -->
        <div id="progress-text" class="progress-text">0%</div>
        <!-- 状态文本提示 -->
        <div id="status-text" class="status-text">正在初始化应用...</div>
        <!-- 加载步骤指示器 -->
        <div class="loading-steps">
            <div class="step active"></div>
            <div class="step"></div>
            <div class="step"></div>
            <div class="step"></div>
        </div>
    </div>
    <!-- 版本信息显示 -->
    <div class="version-text">v4.0.0</div>

    <script>
        /**
         * 启动屏幕控制脚本
         * 
         * 该脚本负责:
         * 1. 模拟应用加载进度
         * 2. 更新UI显示进度和状态
         * 3. 与主进程通信，实现窗口切换
         */

        // 引入Electron的IPC模块，用于与主进程通信
        const { ipcRenderer } = require('electron');

        // 状态文本数组，用于循环显示不同的加载状态
        const statusTexts = [
            "正在初始化应用...",    // 初始状态
            "加载系统组件...",      // 大约25%进度时显示
            "准备用户界面...",      // 大约50%进度时显示
            "连接系统服务...",      // 大约75%进度时显示
            "应用程序即将就绪..."   // 接近100%时显示
        ];

        // 获取DOM元素引用，用于后续动态更新
        const progressBar = document.getElementById('progress-bar');
        const progressText = document.getElementById('progress-text');
        const statusText = document.getElementById('status-text');
        const steps = document.querySelectorAll('.step');

        // 初始化进度和当前步骤
        let progress = 0;         // 进度百分比, 0-100
        let currentStep = 0;      // 当前显示的状态文本索引

        /**
         * 更新加载进度的函数
         * 
         * 该函数负责:
         * 1. 递增加载进度计数
         * 2. 更新进度条UI
         * 3. 根据进度更新状态文本和步骤指示器
         * 4. 递归调用自身实现持续更新
         */
        function updateProgress() {
            // 进度未达到100%时持续更新
            if (progress < 100) {
                // 使用非线性曲线模拟真实加载过程:
                // - 在低进度时增长较快
                // - 在高进度时增长较慢
                const increment = Math.max(1, 10 - Math.floor(progress / 10));
                progress = Math.min(99, progress + increment);

                // 每25%更新一次状态文本和步骤指示器
                if (progress >= (currentStep + 1) * 25 && currentStep < statusTexts.length - 1) {
                    currentStep++;
                    statusText.textContent = statusTexts[currentStep];

                    // 更新步骤指示器激活状态
                    for (let i = 0; i < steps.length; i++) {
                        steps[i].classList.remove('active');
                        if (i <= currentStep) {
                            steps[i].classList.add('active');
                        }
                    }
                }

                // 更新进度条和百分比文本
                progressBar.style.width = `${progress}%`;
                progressText.textContent = `${progress}%`;

                // 使用变速延迟，模拟真实加载过程的不均匀性
                // 延迟时间在100-300ms之间随机变化
                setTimeout(updateProgress, 100 + Math.random() * 200);
            }
        }

        // 延迟500ms后开始更新进度，给渲染过程留出时间
        setTimeout(updateProgress, 500);

        /**
         * 监听主进程发送的"main-window-ready"消息
         * 
         * 当主窗口准备好显示时:
         * 1. 将进度显示为100%
         * 2. 更新状态文本
         * 3. 激活所有步骤指示器
         * 4. 开始淡出动画
         * 5. 动画结束后通知主进程关闭启动窗口
         */
        ipcRenderer.on('main-window-ready', () => {
            console.log('启动屏幕收到主窗口就绪消息');
            // 确保进度显示为100%
            progress = 100;
            progressBar.style.width = '100%';
            progressText.textContent = '100%';
            statusText.textContent = '应用程序已就绪，正在启动...';

            // 激活所有步骤指示器
            for (let i = 0; i < steps.length; i++) {
                steps[i].classList.add('active');
            }

            // 短暂延迟后添加淡出动画，给用户时间看到100%完成状态
            setTimeout(() => {
                console.log('启动屏幕开始淡出动画');
                document.getElementById('splash-content').classList.add('fade-out');

                // 动画结束后发送消息通知主进程关闭启动窗口
                setTimeout(() => {
                    console.log('启动屏幕发送关闭请求');
                    ipcRenderer.send('close-splash-screen');
                }, 400); // 等待淡出动画完成
            }, 200); // 在100%完成后延迟500ms
        });
    </script>
</body>

</html>